<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Core CSS - Include with every page -->
    <link type="text/css" rel="stylesheet" href="/resources/css/bootstrap-3.1.1.min.css" " />
        
    <link type="text/css" rel="stylesheet" href="/resources/font-awesome/css/font-awesome.css" />

    <!-- SB Admin CSS - Include with every page -->
    <link type="text/css" rel="stylesheet" href="/resources/css/sb-admin.css"  />
    
    <style>
        .no-border-on-me>thead>tr>th,
        .no-border-on-me>tbody>tr>th,
        .no-border-on-me>tfoot>tr>th,
        .no-border-on-me>thead>tr>td,
        .no-border-on-me>tbody>tr>td,
        .no-border-on-me>tfoot>tr>td
        {
            border-top-style: none;
            border-bottom-style: none;
        }
    </style>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    
    <title data-th-text="#{login.page.title}">Login Page</title>
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <div class="login-panel panel panel-default">
                    <div class="panel-body">
                        <form name="f" data-th-action="@{/login}" method="post">
                            <fieldset>
				                <legend>Please Login</legend>
				                <div data-th-if="${param.error}" class="alert alert-danger">
				                    Invalid username and password.
				                </div>
				                <div data-th-if="${param.logout}" class="alert alert-success">
				                    You have been logged out.
				                </div>
                                <div class="form-group">
                                    <label for="username">Username</label>
                                    <input class="form-control" placeholder="User ID" type="text" id="username" name="username"></input>
                                </div>
                                <div class="form-group">
                                    <label for="password">Password</label>
                                    <input class="form-control" placeholder="Password" type="password" id="password" name="password"></input>
                                </div>
                                <div class="form-actions">
                                    <button type="submit" class="btn btn-lg btn-success btn-block">Login</button>
                                </div>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script type="text/javascript" src="/resources/js/jquery-1.11.0.min.js" "></script>
        
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script type="text/javascript" src="/resources/js/bootstrap-3.1.1.min.js" "></script>

    <!-- Core Scripts - Include with every page -->
    <script type="text/javascript" src="/resources/js/plugins/metisMenu/jquery.metisMenu.js" ></script>
        
    <!-- SB Admin Scripts - Include with every page -->
    <script type="text/javascript" src="/resources/js/sb-admin.js" ></script>

</body>
</html>